<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h_navigation_button_page">
        <NTooltip placement="bottom" trigger="hover">
            <template #trigger>
                <n-button type="info" @click="myStore.createNewPage()">➕</n-button>
            </template>
            <span>添加页面</span>
        </NTooltip>
        <!--页面切换 -->

        <div class="h_page_list_bar">
            <div class="h_page_button_group" v-for="Item in pages">
                <div class="h_page_insert"></div>
                <n-dropdown placement="bottom-start" :show-arrow="true" trigger="hover" size="small" :options="options"
                    @select="handleSelect">
                    <div class="h_page_button" :class="[currentPageKey === Item.key ? 'h_active' : '']"
                        @click="myStore.setCurrentPage(Item.key)" @mouseenter="mouseEnter(Item.key)"> {{ Item.label }}
                    </div>
                </n-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布
// 解构-存储
let { pages, currentPageKey } = storeToRefs(myStore);
/** 当前键*/
let currentKey = ref('')

let options = [
    {
        label: '移动到头部',
        key: 'toLeft'
    },
    {
        label: '移动到尾部',
        key: 'toRight'
    },
    {
        label: '删除页面',
        key: 'delete'
    },
]
/* ================================================================================================ */
//                                函数 ★
/* ================================================================================================ */
/** 鼠标移入 */
const mouseEnter = (Key: string) => {
    // console.log("鼠标移入");
    // console.log(Key);
    currentKey.value = Key

};

/** 处理选择 */
const handleSelect = (key: string) => {
    console.log("处理选择");
    console.log(currentKey.value);
    console.log(key);

    /** 复制页面 */
    let copyPage = []
    /** 当前索引 */
    let currentIndex = null
    /** 剪切页面 */
    let catPage = []


    if (key === 'toLeft'/*左移*/) {
        // 选出要移动的页面
        for (let index = 0; index < myStore.pages.length; index++) {
            const element = myStore.pages[index];
            if (element.key === currentKey.value) {
                currentIndex = index - 1
                copyPage.push(element)
            } else {
                catPage.push(element)
            }
        }
        // console.log(copyPage[0]);
        // console.log(catPage);
        // console.log(currentIndex);

        catPage.unshift(copyPage[0])
        myStore.pages = catPage


    }

    if (key === 'toRight'/*右移*/) {
        // 选出要移动的页面
        for (let index = 0; index < myStore.pages.length; index++) {
            const element = myStore.pages[index];

            if (element.key === currentKey.value) {
                currentIndex = index + 1
                copyPage.push(element)
            } else {
                catPage.push(element)
            }
        }
        // console.log(copyPage[0]);
        // console.log(catPage);
        // console.log(currentIndex);

        catPage.push(copyPage[0])
        myStore.pages = catPage
    }

    if (key === 'delete'/*删除页面*/) {
        console.log("删除页面");
        myStore.deletePage(currentKey.value)
    }
};


</script>

<style lang="scss" scoped>
.h_navigation_button_page {
    margin: 0px;
    padding: 0px;
    height: 40px;
    width: 100%;
    user-select: none;
    background-color: rgb(80, 80, 80);
    display: flex;
    flex-direction: row;
    justify-content: start;

}

// 页面列表条
.h_page_list_bar {
    margin-left: 5px;
    padding: 0px;
    height: 40px;
    width: 60vw;
    user-select: none;
    background-color: rgb(80, 80, 80);
    display: flex;
    flex-direction: row;
    justify-content: start;

    overflow-y: hidden;
    overflow-x: scroll;

    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: 5px;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

    &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgb(197, 197, 197);
    }
}

// 按钮组
.h_page_button_group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    // 页面插入
    .h_page_insert {
        width: 5px;
    }

    // 插入
    .h_insert {
        width: 0px;
        border-left: 5px solid rgb(255, 255, 255);
    }

    // 水平导航按钮
    .h_page_button {
        padding: 0px;
        min-width: 70px;
        height: 26px;
        font-size: medium;
        text-align: center;
        background-color: rgb(80, 80, 80);
        color: rgb(0, 0, 0);
        border-bottom: 10px solid rgb(80, 80, 80);
        cursor: pointer; // 小手指

        &:hover {
            color: rgb(218, 218, 218);
            border-bottom: 10px solid rgb(0, 0, 255);
        }
    }

    // 激活
    .h_active {
        background-color: rgb(118, 118, 118);
        color: rgb(218, 218, 218);
        border-bottom: 10px solid #1d9f00;
    }
}
</style>